<template>
    <section class="dialogue">
        <!-- 头部 -->
        <head-top logo-part="true"
                  search-part="true"
                  add="true"></head-top>
        <div class="dialogue_con">
            <!-- 电脑登录 -->
            <section class="computer"
                     v-if="computershow">
                <router-link to='/computer'
                             class="computer_link">
                    <section class="computer_icon">
                        <svg>
                            <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                 xlink:href="#computer"></use>
                        </svg>
                    </section>
                    <section class="computer_text">Windows 微信已登录<span v-if="mute">， 手机通知已关闭</span></section>
                </router-link>
            </section>
            <!-- 对话列表 -->
            <section class="conversation">
                <ul>
                    <router-link to="/singlechat"
                                 tag="li"
                                 v-for="(item,index) in dialogueList"
                                 :key="index"
                                 @click.native="refreshInfor(item)">
                        <div class="imgwipe">
                            <i class="redicon_num"
                               v-if="newinfor">
                                1
                            </i>
                            <i class="redicon"
                               v-if="newtext"></i>
                            <div class="imgstyle">
                                <img :src="item.headurl"
                                     alt="">
                            </div>
                        </div>
                        <div class="infordetail">
                            <div class="infordetail_top clear">
                                <span class="left ellipsis">{{item.remarks ? item.remarks : item.petname}}</span>
                                <span class="right">12:07</span>
                            </div>
                            <div class="infordetail_bot ellipsis">
                                {{item.newmeassage}}
                            </div>
                        </div>
                    </router-link>
                </ul>
            </section>
            <!-- 群聊 -->
            <section class="conversation">
                <ul>
                    <router-link to="/groupchat"
                                 tag="li">
                        <div class="imgwipe">
                            <i class="redicon_num"
                               v-if="newinfor">1</i>
                            <i class="redicon"
                               v-if="newtext"></i>
                            <div class="imgstyle imgstyletwo">
                                <img :src="item.avatar"
                                     alt=""
                                     v-for="(item,index) in groupHead"
                                     :key="index">
                            </div>
                        </div>
                        <div class="infordetail">
                            <div class="infordetail_top clear">
                                <span class="left ellipsis">群聊</span>
                                <span class="right">12:07</span>
                            </div>
                            <div class="infordetail_bot ellipsis">
                                请同学们文明交流~~~
                            </div>
                        </div>
                    </router-link>
                </ul>
            </section>
        </div>
        <!-- 输入用户名弹窗 -->
        <section class="consumer"
                 :class="{consumeradd : consumer}"
                 v-if="consumerthing">
            <div class="consumerbg"></div>
            <div class="consumercon">
                <section class="login">
                    <div class="useid"
                         :class="{'useid_border' : borderColor}">
                        <div class="mark">帐号</div>
                        <div class="input_mark"><input type="text"
                                   placeholder="微信号(随便输入)"
                                   v-model="inputaccounts"
                                   @input="inpuMark"
                                   @click="accountsMark" /></div>
                        <div class="svg_close"
                             v-if="accounts"
                             @click="clearMark">
                            <svg fill="#c3c3c3">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                     xlink:href="#close"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="login_botton"
                         @click="loginSuccess">
                        登 录
                    </div>
                </section>
            </div>
        </section>
        <!-- 底部导航 -->
        <foot-guide></foot-guide>
        <transition name="router-show">
            <router-view></router-view>
        </transition>
    </section>
</template>

<script>
import headTop from '@/components/header/head'
import footGuide from '@/components/footer/foot'
import { imgurl } from '@/config/env';
import { mapState, mapActions, mapMutations } from 'vuex'
import { groupChat, userInfo, login, dialog } from '@/service/getData'
import fetch from '@/config/fetch'

export default {
    data() {
        return {
            newinfor: false,		//未静音时新消息提醒
            newtext: false,		//静音时消息提醒
            dialogList: [],
            consumer: false,
            inputaccounts: "",		//帐号	
            inputcode: "",			//密码
            accounts: false,		//清除帐号
            code: false,			//清除密码
            borderColor: true,		//下边框颜色
            borderColortwo: false,
            timer: null,
            groupHead: [],
            dialogueList: [],
            consumerthing: false,
        }
    },
    created() {
        this.initData()
    },
    beforeDestroy() {

    },
    beforeMount() {
        //console.log(this.contactList)
    },
    mounted() {
        groupChat().then((res) => {
            this.groupHead = [...res.grouphead]

        });
        dialog().then((res) => {
            this.dialogueList = [...res]
            this.dialogueList = [...this.contactList, ...this.dialogueList]
        })

    },
    components: {
        headTop,
        footGuide
    },
    computed: {
        ...mapState([
            'mute', 'computershow', 'infor', 'contactList',
        ]),

    },
    methods: {

        ...mapMutations([
            "SAVE_MESSAGE", "LOGIN_COVER", 'GET_USERINFO'
        ]),
        async initData() {
            try {
                const user_id = localStorage.getItem('user_id')
                const res = await userInfo(user_id)
                if (res.status !== 200) {
                    this.LOGIN_COVER(true)
                } else {
                    this.GET_USERINFO(res.user_info)
                }
            } catch (err) {
                console.log('获取用户信息失败', err)
                this.LOGIN_COVER(true)
            }
        },
        refreshInfor(item) {
            this.SAVE_MESSAGE(item)
        },
        inpuMark() {
            this.inputaccounts ? this.accounts = true : this.accounts = false;
        },
        inpuCode() {
            this.inputcode ? this.code = true : this.code = false;
        },
        accountsMark() {
            this.borderColor = true;
            this.borderColortwo = false;
        },
        accountsCode() {
            this.borderColor = false;
            this.borderColortwo = true;
        },
        clearMark() {
            this.inputaccounts = "";
            this.accounts = false;
        },
        clearCode() {
            this.inputcode = "";
            this.code = false;
        },
        async loginSuccess() {

            if (this.inputaccounts) {
                this.consumer = true;
                try {
                    const res = await login({ username: this.inputaccounts })
                    if (res.status == 200) {
                        localStorage.setItem('user_id', res.user_info.id.toString())
                        this.GET_USERINFO(res.user_info)
                        this.LOGIN_COVER(false)
                    }
                } catch (err) {
                    console.log('注册失败', err)
                    this.LOGIN_COVER(true)
                }
            }
        }
    }
}
</script>
// <style lang="less" scoped>
// @import "~@/style/public.less";
// .router-show-enter-active,
// .router-show-leave-active {
//     transition: all 0.4s;
// }
// .router-show-enter,
// .router-show-leave-active {
//     transform: translateX(100%);
// }
// @keyframes fadeOut {
//     from {
//         opacity: 1;
//     }
//     100% {
//         opacity: 0;
//     }
// }
// .consumer {
//     position: fixed;
//     width: 100%;
//     height: 100%;
//     top: 0;
//     left: 0;
//     z-index: 100;
//     .consumerbg {
//         position: fixed;
//         width: 100%;
//         height: 100%;
//         top: 0;
//         background: #000;
//         opacity: 0.5;
//     }
//     .consumercon {
//         @include center;
//         .login {
//             background: #fff;
//             border-radius: 5px;
//             padding: 1rem;
//             width: 12.3786666667rem;
//             margin: 0 auto;
//             .useid {
//                 width: 100%;
//                 border-bottom: 1px solid #d4d4d4;
//                 @include justify(flex-start);
//                 align-items: center;
//                 .mark {
//                     @include sizeColor(0.64rem, #333);
//                     letter-spacing: 0.5546666667rem;
//                     line-height: 2.0266666667rem;
//                     padding-left: 0.4266666667rem;
//                 }
//                 .input_mark {
//                     margin-right: 0.34rem;
//                     margin-left: 0.5rem;
//                     @include widthHeight(5.1rem, 2.0266666667rem);
//                     input {
//                         display: inline-block;
//                         width: 5.1rem;
//                         line-height: 2rem;
//                         @include sizeColor(0.64rem, #333);
//                     }
//                 }
//                 .svg_close {
//                     @include widthHeight(0.64rem, 0.64rem);
//                     svg {
//                         display: block;
//                         @include widthHeight(100%, 100%);
//                     }
//                 }
//             }
//             .useid_border {
//                 border-color: #45c01a;
//             }
//             .login_botton {
//                 margin-top: 1.536rem;
//                 text-align: center;
//                 background: #1aad19;
//                 border: 1px solid #179e16;
//                 border-radius: 5px;
//                 line-height: 1.6rem;
//                 @include sizeColor(0.7rem, #fff);
//             }
//         }
//     }
// }
// .consumeradd {
//     animation: fadeOut 0.4s 1 linear both;
// }
// .dialogue {
//     width: 100%;
//     background: #fff;
//     .dialogue_con {
//         padding-top: 2.06933rem;
//         -webkit-overflow-scrolling: touch;
//         .computer {
//             @include widthHeight(100%, 1.9626666667rem);
//             background: #f5f5f5;
//             border-bottom: 1px solid #e0e0e0;
//             .computer_link {
//                 @include justify(flex-start);
//                 .computer_icon {
//                     @include widthHeight(1.2933333333rem, 1.9626666667rem);
//                     margin-left: 1.0666666667rem;
//                     margin-right: 0.96rem;
//                     @include align;
//                     svg {
//                         @include widthHeight(100%, 1rem);
//                     }
//                 }
//                 .computer_text {
//                     line-height: 1.9626666667rem;
//                     @include sizeColor(0.5546666667rem, #474747);
//                     span {
//                         display: inline-block;
//                         @include sizeColor(0.5546666667rem, #474747);
//                     }
//                 }
//             }
//         }
//         .conversation {
//             width: 100%;
//             ul {
//                 width: 100%;
//                 li {
//                     padding: 0.3413333333rem 0.5973333333rem;
//                     box-sizing: border-box;
//                     border-bottom: 1px solid #e0e0e0;
//                     @include justify(flex-start);
//                     .imgwipe {
//                         @include widthHeight(2.0906666667rem, 2.0906666667rem);
//                         position: relative;
//                         margin-right: 0.512rem;
//                         .redicon_num {
//                             position: absolute;
//                             right: -0.4rem;
//                             top: -0.3rem;
//                             @include widthHeight(
//                                 0.8106666667rem,
//                                 0.8106666667rem
//                             );
//                             @include sizeColor(0.512rem, #fff);
//                             line-height: 0.8806666667rem;
//                             padding: 0 4px;
//                             text-align: center;
//                             @include bg("../../images/warn.png");
//                         }
//                         .redicon {
//                             position: absolute;
//                             right: -0.21rem;
//                             top: -0.21rem;
//                             @include widthHeight(
//                                 0.4266666667rem,
//                                 0.4266666667rem
//                             );
//                             @include bg("../../images/warn.png");
//                             border-radius: 50%;
//                         }
//                         .imgstyle {
//                             @include widthHeight(2.0906666667rem, 100%);
//                             display: flex;
//                             justify-content: center;
//                             flex-flow: row wrap;
//                             align-items: flex-start;
//                             align-content: flex-start;
//                             overflow: hidden;
//                             background: #dddbdb;
//                             img {
//                                 width: 10%;
//                                 height: auto;
//                                 border: 0;
//                                 flex-grow: 2;
//                             }
//                         }
//                         .imgstyletwo {
//                             img {
//                                 width: 50%;
//                                 height: 50%;
//                                 flex-grow: 0;
//                             }
//                         }
//                     }
//                     .infordetail {
//                         width: 11.5626666667rem;
//                         padding-top: 0.2133333333rem;
//                         .infordetail_top {
//                             width: 100%;
//                             padding-bottom: 0.2133333333rem;
//                             span:nth-of-type(1) {
//                                 width: 8.7466666667rem;
//                                 @include sizeColor(0.5973333333rem, #38373c);
//                             }
//                             span:nth-of-type(2) {
//                                 @include sizeColor(0.4266666667rem, #b2b6b9);
//                             }
//                         }
//                         .infordetail_bot {
//                             width: 9.5573333333rem;
//                             @include sizeColor(0.512rem, #9e9e9e);
//                         }
//                     }
//                 }
//             }
//         }
//     }
// }
// </style>